<template>
  <div class="mywrap">
    <div class="listwrap" ref="listwrap">
      <dt>楼号</dt>
      <dd v-for="item in building_data" :key="item.id" @click="selectItem(1, item.id)">{{item.name}}</dd>
      <!-- <dd>1号楼</dd><dd>2号楼</dd><dd>3号楼</dd><dd>2号楼</dd><dd>3号楼</dd><dd>2号楼</dd><dd>3号楼</dd><dd>2号楼</dd><dd>3号楼</dd><dd>2号楼</dd><dd>3号楼</dd><dd>2号楼</dd><dd>3号楼</dd><dd>2号楼</dd><dd>3号楼</dd><dd>2号楼</dd><dd>3号楼</dd> -->
      <dt>维修项</dt>
      <dd v-for="item in category_data" :key="item.id" v-if="item.name !== '一键呼叫'" @click="selectItem(2, item.id)">{{item.name}}</dd>
      <!-- <dd>电力</dd><dd>空调</dd><dd>供水</dd><dd>电梯</dd><dd>高压</dd><dd>排水</dd><dd>家具</dd><dd>电话</dd><dd>网络</dd><dd>影音</dd><dd>消防</dd> -->
    </div>

    <div class="my-cell my-collapse-item__title" @click="collapseit">
      <span class="my-cell__title">{{searchText}}</span>
      <!-- <a v-show="btnshow" href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">确定</a> -->
      <i class="van-icon van-icon-arrow van-cell__right-icon" ref="collapseIcon"></i>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Search',
  data () {
    return {
      show: false,
      searchText: '筛选服务单',
      bidarr: [],
      cidarr: []
    }
  },
  computed: {
    ...mapState(['building_data', 'category_data'])
  },
  methods: {
    selectItem (ty, tid) {
      let dom = event.target
      let hasselected = dom.className === 'selected'
      dom.className = hasselected ? '' : 'selected'

      var operarr
      if (ty === 1) { // 楼号
        operarr = this.bidarr
      } else { // 维修项
        operarr = this.cidarr
      }

      if (hasselected) {
        for (let i = 0; i < operarr.length; i++) {
          if (tid === operarr[i]) {
            operarr.splice(i, 1)
            break
          }
        }
      } else {
        operarr.push(tid)
      }

      this.$emit('gosearch', this.bidarr, this.cidarr)
    },
    collapseit () {
      this.show = !this.show
      if (this.show) { // 要展开
        this.$refs.collapseIcon.style.transform = 'rotate(180deg)'
        setTimeout(() => {
          this.$refs.listwrap.style.maxHeight = (document.documentElement.clientHeight - 170) + 'px'
          this.$refs.listwrap.style.overflow = 'auto'
          this.searchText = '收起'
        }, 300)
      } else { // 收起
        this.$refs.collapseIcon.style.transform = 'rotate(0deg)'
        setTimeout(() => {
          this.$refs.listwrap.style.maxHeight = 0
          this.searchText = '筛选服务单'
        }, 300)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.listwrap
  overflow hidden
  max-height 0
  transition: max-height .5s ease-in-out;
  padding 0 .3rem
  dt
    line-height .48rem
    margin-top .2rem
    color #999
  dd
    display inline-block
    border-radius 4px
    font-size 14px
    padding 5px 15px
    color black
    margin-right 8px
    margin-bottom 4px
    &.selected
      background #3E78A9
      color white

.my-collapse-item__title
  padding: 0;
  height: 40px
  text-align: center
  border-bottom: 1px solid #efefef
  border-top: 1px solid #efefef
  display flex
  align-items center
  justify-content center
  .my-cell__title
    font-size: 14px;
    color: black;
  .van-cell__right-icon
    color: #999;
    font-size: 12px;
    margin-left: 5px;
    transition: 0.3s;
    &::before
      transform: rotate(90deg);
</style>
